<!-- components/OverflowText.vue -->
<template>
  <div ref="textContainer" class="overflow-text" :style="{ maxWidth }">
    <el-tooltip v-if="isOverflow" class="item" effect="dark" :content="tooltipContent" placement="top-start">
      <span class="overflow-tooltip">{{tooltipContent}}</span>
    </el-tooltip>
    <span v-else class="overflow-tooltip">{{tooltipContent}}</span>
  </div>
</template>
  
  <script>
export default {
  props: {
    maxWidth: {
      type: String,
      default: '100%'
    },
    tooltipContent: String
  },
  data() {
    return {
      isOverflow: false
    };
  },
  mounted() {
    this.checkOverflow();
    this.resizeObserver = new ResizeObserver(this.checkOverflow);
    this.resizeObserver.observe(this.$refs.textContainer);
  },
  beforeDestroy() {
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
  },
  methods: {
    checkOverflow() {
      const el = this.$refs.textContainer;
      this.isOverflow = el.scrollWidth > el.clientWidth;
    }
  }
};
  </script>
  
  <style>
.overflow-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
  padding-left: 4px;
}
.overflow-tooltip {
    font-size: 12px;
        color: #333;
        
}
</style>